<template>
<view class="page flex_c">
  <nav-bar text-center title="首页" >
    <template>
      <view class="tabLink">
        <view class="flex_b_c">
          <view :class="['tabLink_item', form.collectType === 10 ? 'on' : '']" @click="onChangeTabs(10)">招募</view>
          <view :class="['tabLink_item', form.collectType === 11 ? 'on' : '']" @click="onChangeTabs(11)">作品</view>
        </view>
      </view>
    </template>
  </nav-bar>
  <view class="flex1" style="overflow: hidden">
    <scroll-view scroll-y style="height: 100%" lower-threshold="100" @scrolltolower="onLoad" refresher-enabled
      :refresher-triggered="triggered" @refresherrefresh="onRefresh">
      <div v-if="form.collectType === 11" class="flex_b_c p-20 flex_wrap  gap-12">
        <navigator :url="`/pages/ipElite/repWorksDetail?id=${item.userReprWorks.id}`" hover-class="none" v-for="(item, idx) in list" :key="item.id">
          <repWorkVideo :item="item.userReprWorks" >
            <template v-slot:star>
              <image @click="onCancleCol(item.userReprWorks.id, 11, idx)" class="cancle_star extend_click"
                src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/cancle_col_icon.png">
              </image>
            </template>
          </repWorkVideo>
        </navigator>
      </div>
      <div v-else class="pt-20 flex_c gap-12">
        <navigator :url="`/pages/ipElite/recruitDetail?id=${item.userRecruitInfo.id}`" hover-class="none" v-for="(item, idx) in list" :key="item.id">
          <recruitCard v-if="form.collectType === 10" :item="item.userRecruitInfo">
            <template v-slot:star>
              <image @click="onCancleCol(item.userRecruitInfo.id, 10, idx)" class="cancle_star extend_click"
                src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/cancle_col_icon.png">
              </image>
            </template>
          </recruitCard>
        </navigator>
      </div>
      <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
        description="暂无精英招募" />
      <view v-if="total && total === list.length" class="all_tip">到底了</view>
    </scroll-view>
  </view>
    
</view>
</template>
<script setup>
import recruitCard from "@/components/ipElite/recruit-card"
import repWorkVideo from "@/components/ipElite/rep-work-video"
import { onShow } from '@dcloudio/uni-app'

import { ref, reactive, toRefs, onBeforeMount } from 'vue'
import {
  getCollectList, // 列表
} from '@/api/center'
let form = reactive({
  collectType: 10,  // 0：作品；1：项目；2：作品征集；3：项目征集 4：交易 5：IP精英收藏 6:话题收藏 7.剧本征集 8.小说征集 9.拍摄征集 10.招募
  pageCode: 1,
  pageSize: 40
})
onShow(() => {
  data.list = []
  form.pageCode = 1
  form.collectType = 10
  fnGet()
})
let data = reactive({
  list: [],
  total: '',
  triggered: false
})
let fnGet = async () => {
  const { code, data: { total, rows } } = await getCollectList(form)
  if (code === 200) {
    data.list = data.list.concat(rows)
    data.total = total
    data.triggered = false
  }
}
let onChangeTabs = (id) => {
  form.collectType = id
  form.pageCode = 1
  data.list = []
  fnGet()
}
let onLoad = e => {
  if (data.total > data.list.length) {
    ++form.pageCode
    fnGet()
  }
}
let onRefresh = () => {
  form.pageCode = 1
  data.list = []
  data.triggered = true
  fnGet()
}
let { total, list, triggered } = toRefs(data)


</script>
<style lang="scss" scoped>
.tabLink {
  display: inline-block;
  min-width: 340rpx;
  min-width: 220rpx;
  .tabLink_item {
    font-family: pf_bold;
    // font-weight: bold;
    font-size: 34rpx;
    height: 38rpx;
    line-height: 38rpx;
    color: #666666;
    &.on {
      z-index: 2;
      color: #000000;
      position: relative;
      &:after {
        z-index: 1;
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        right: 0;
        height: 6rpx;
        background: #00B277;
        border-radius: 3rpx;
      }
    }
  }

}

</style>
<style lang="scss" >
@import "/static/style/listsearch.scss";
.page {
  padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
  height: 100vh;
}
</style>
